<template>
  <view class="track-page">
    <!-- 顶部状态概览 -->
    <view class="header" v-if="latestItem">
      <view class="status-row">
        <text class="status-dot"></text>
        <text class="status-text">{{ latestItem.guijiForm || latestItem.status || '最新进展' }}</text>
      </view>
      <view class="status-time">{{ formatTime(latestItem.create_time) }}</view>
    </view>

    <!-- 加载与空态 -->
    <uni-load-more :loadingType="loadingType" />
    <view class="empty" v-if="!loading && trackList.length === 0">暂无轨迹信息</view>

    <!-- 轨迹时间轴 -->
    <scroll-view class="timeline" scroll-y v-if="trackList.length > 0">
      <view class="node" v-for="(item, index) in trackList" :key="index" :class="{ active: index === 0 }">
        <view class="node-left">
          <view class="dot"></view>
          <view class="line" v-if="index < trackList.length - 1"></view>
        </view>
        <view class="node-right">
          <view class="bubble">
            <view class="bubble-time">{{ formatTime(item.create_time) }}</view>
            <view class="bubble-text">{{ item.guijiForm || item.desc }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue'
export default {
  components: { uniLoadMore },
  data() {
    return {
      loading: true,
      order_id: '',
      trackList: []
    }
  },
  computed: {
    latestItem() {
      return this.trackList && this.trackList.length ? this.trackList[0] : null
    },
    loadingType() {
      if (this.loading) return 1
      if (!this.loading && this.trackList.length === 0) return 0
      return 0
    }
  },
  onLoad(options) {
    this.order_id = options?.order_id || ''
    this.fetchTrack()
  },
  onPullDownRefresh() {
    this.fetchTrack(() => uni.stopPullDownRefresh())
  },
  methods: {
    fetchTrack(done) {
      this.loading = true
      const finish = () => { this.loading = false; done && done() }
      if (typeof this._get === 'function') {
        this._get('user.order/track', { order_id: this.order_id }, (res) => {
          this.trackList = (res && res.data && res.data.list) || []
          finish()
        }, (err) => { finish(); uni.showToast({ title: '获取轨迹失败', icon: 'none' }) })
      } else {
        // 兜底：无全局 _get 时，直接结束
        finish()
      }
    },
    formatTime(ts) {
      if (!ts) return ''
      if (typeof ts === 'string' && ts.includes('-')) return ts
      const d = new Date(parseInt(ts) * 1000)
      const p = n => n.toString().padStart(2, '0')
      return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
    }
  }
}
</script>

<style lang="scss">
.track-page { min-height: 100vh; background: #f6f8fb; }
.header { padding: 24rpx 32rpx; background: #fff; box-shadow: 0 6rpx 20rpx rgba(30,128,255,0.06); margin-bottom: 16rpx; }
.status-row { display: flex; align-items: center; }
.status-dot { width: 10rpx; height: 10rpx; border-radius: 50%; background: #1e80ff; margin-right: 12rpx; }
.status-text { font-size: 30rpx; color: #1e80ff; font-weight: 600; }
.status-time { margin-top: 8rpx; color: #8a8f99; font-size: 24rpx; }

.timeline { height: calc(100vh - 180rpx); padding: 24rpx 24rpx 40rpx 80rpx; background: #f6f8fb; }
.node { position: relative; display: flex; margin-bottom: 28rpx; }
.node-left { position: relative; width: 40rpx; margin-right: 20rpx; }
.dot { width: 20rpx; height: 20rpx; border-radius: 50%; background: #cfd6e4; border: 6rpx solid #e9edf5; box-sizing: border-box; position: relative; left: -40rpx; }
.line { position: absolute; left: -32rpx; top: 20rpx; bottom: -28rpx; width: 4rpx; background: linear-gradient(180deg,#e9edf5 0%, #e1e7f2 100%); }
.node.active .dot { background: #1e80ff; border-color: rgba(30,128,255,0.25); box-shadow: 0 0 0 10rpx rgba(30,128,255,.08); }

.node-right { flex: 1; }
.bubble { background: #ffffff; border-radius: 16rpx; padding: 18rpx 22rpx; box-shadow: 0 8rpx 24rpx rgba(33,51,79,0.06); border-left: 6rpx solid #1e80ff; }
.node:not(.active) .bubble { border-left-color: #e1e7f2; }
.bubble-time { font-size: 24rpx; color: #98a1ad; margin-bottom: 8rpx; }
.bubble-text { font-size: 28rpx; color: #2d3640; line-height: 1.6; }

.empty { text-align: center; color: #98a1ad; padding: 40rpx 0; }
</style>